<template>
    <div class='picket'>
        <div v-for="item in ticket" :key="item.id" class='item border-bottom'>
            <div class='agePicket'>
                <div>
                <span class='picketIcon'></span>
                {{ item.name }}
                </div>
                <div class='buy'>
                <button @click="book(item)">预定</button>
                <span class='price'>￥{{ item.price }}</span>
                </div>
            </div>
            <div class='secondList border-bottom' v-if="item.children" >
                <picket :ticket='item.children'></picket>
            </div>
        </div>
    </div>
</template>


<script>
    export default{
        name:'picket',
        props:{
            ticket:Array
        },
        data(){
            return {
               
            }
        },
        methods: {
            book(item){
                this.$emit('okbook',item) 
               this.$store.commit('changbuyflag',true)
                 this.$store.commit('buydata',item)
            }
        }
    }
</script>


<style lang="scss" scoped>
.picket{
    width: 100%;
    background-color: #fff;
    
    .agePicket{  
            padding: 0.2rem 0;
         background-color: #fff;
        width: 100%;
        line-height: 0.8rem;
        height: 0.8rem;
        font-size: 0.36rem; 
        justify-content: space-between;
        display: flex;
        .buy{
             button{
                 background-color: #FF9616;
                 color: #ffffff;
                 width: 1rem;
                 border-radius: 10%;
                 font-size: 0.28rem;
                 height: 0.6rem;
                 line-height: 0.6rem;
             }
            .price{
            padding-right: 0.2rem;
            color: #a10000;
                  }    
            }
        
        .picketIcon{
                display: inline-block;
                position: relative;
                width: .36rem;
                height: .36rem;
                top: 0.06rem;
                left: .1rem;
                background: url(//s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat;
                margin-right: .1rem;
                background-size: .4rem 3rem;
        }
    }
    .secondList{
        padding-left: 0.2rem;
        .agePicket{
            padding: 0 !important;
         background-color: #fff;
        width: 100%;
        line-height: 0.8rem;
        height: 0.8rem;
        font-size: 0.26rem;
        }
    }
}
</style>

